<!-- 接收数组：caledarDataProps，里面days代表日期，下面各字段代表是否当日请假
halfSick,
halfStudy
halfThing
halfAbsenteeism -->
<!-- 列：caledarDataProps = [
	{day:'1',halfSick:false,halfStudy:false,halfThing:false,halfAbsenteeism:false,sickALL,thingAll,study,}
] -->
<template>
	<view class="my-calendar">
		<view class="date">{{ date }}</view>
		<view class="calendar-weeks-wrap">
			<view class="calender-week" v-for="(item, index) in weeks">{{ item }}</view>
		</view>
		<view class="calendar-days-wrap">
			<!-- <view class="get-weeks" :style="{ width: nowWeek * weekWith + 'rpx' }"></view> -->
			<view class="get-weeks" v-for="item in nowWeek"></view>
			<view
				class="calendar-days"
				v-for="(item, index) in wachData"
				:key="index"
				:style="[{ background: item.half==1?getBgColor('出勤') :getBgColor(item.name) }]"
			>
				<view class="days">{{ item.days }}</view>
				<view class="half-yearLeave" v-if="item.half==1" :style="[{ borderRight: '100rpx solid ' + getBgColor(item.name) }]"></view>
			</view>
		</view>
		<view class="icon-circle">
			<view class="circl-wrap" v-for="item in tipsData">
				<view class="icon-1" :style="[{ background:getBgColor(item.title)}]"></view>
				<view class="icon-title">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '../../common/utils/utils.js'
export default {
	name: "my-calendar",
	data() {
		return {
			weeks: ['日', '一', '二', '三', '四', '五', '六'],
			wachData:this.caledarDataProps,
			weekWith:''
		};
	},
	props: {
		tipsData:'',
		caledarDataProps: {
			type: Array
		},
		date:'',
		nowWeek:'',
	},
	methods: {
		getBgColor(Str) {
			return utils.getColorByType(Str)
		},
		
	},
	watch:{
		
	},
	created() {
		let newarr=this.wachData.filter(item=>item.name!=undefined)
		this.wachData=newarr
		this.wachData.forEach(item=>{
			// console.log(item)
			if(item.name.indexOf('半日')!=-1){
				item.half=1
			}else{
				item.half=0
			}
		})
	}
}
</script>

<style lang="scss" scoped>
.get-weeks {
	width: 100rpx;
	height: 100rpx;
	border: 2rpx solid #ffffff;
	color: #ffffff;
}
.my-calendar {
	display: flex;
	flex-direction: column;
	padding: 0 10rpx;
	.date {
		font-size: 32rpx;
		font-weight: 600;
		margin-left: 36rpx;
		margin-bottom: 20rpx;
		color: #f97d2a;
		display: flex;
		margin-bottom: 20rpx;
	}
	.icon-circle {
		width: 730rpx;
		display: flex;
		flex-wrap: wrap;
		margin-left: 40rpx;
		margin-top: 40rpx;
		.circl-wrap {
			margin-top: 20rpx;
			display: flex;
			padding: 0 16rpx;
			align-items: center;
			@mixin iconColor() {
				width: 14rpx;
				height: 14rpx;
				border-radius: 50%;
			}
			.icon-1 {
				@include iconColor();
			}
			.icon-title {
				font-size: 24rpx;
				margin-left: 10rpx;
			}
		}
	}
	.calendar-weeks-wrap {
		width: 730rpx;
		margin-bottom: 20rpx;
		display: flex;
		.calender-week {
			margin: 0 auto;
			width: 102rpx;
			font-size: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.calendar-days-wrap {
		width: 730rpx;
		display: flex;
		flex-wrap: wrap;
		.calendar-days {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			border: 2rpx solid #b2dbff;
			color: #ffffff;
			@mixin leave() {
				width: 0;
				height: 0;
				border-bottom: 100rpx solid transparent;
				position: absolute;
			}
			.days {
				position: absolute;
				z-index: 100;
			}
			.half-yearLeave {
				@include leave();
			}
		}
	}
}
</style>
